<!-- 简历分析雷达图  -->
<template>
  <div class="radar-chart-container">
    <v-chart class="chart" :option="option" autoresize />
    <a-divider />
    <a-card title="维度配置理由">
      {{ weightConfigReason }}
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import { computed } from 'vue'

use([CanvasRenderer, RadarChart, TitleComponent, TooltipComponent, LegendComponent, RadarComponent])

const props = defineProps({
  dimensions: {
    type: Array,
    required: true,
    default: () => [],
  },
  scores: {
    type: Array,
    required: true,
    default: () => [],
  },
  weightConfigReason: {
    type: String,
    required: true,
    default: '',
  },
})

// 确保数据存在
const safeDimensions = computed(() => {
  if (!props.dimensions || !Array.isArray(props.dimensions)) return []
  return props.dimensions.map((d) => ({
    name: d?.name || '',
    weight: d?.weight || 100,
    reason: d?.reason || '',
  }))
})
const safeScores = computed(() => {
  if (!props.scores || !Array.isArray(props.scores)) return []
  return props.scores.map((s) => s || 0)
})

const option = computed(() => ({
  title: {
    text: '能力雷达图',
    left: 'center',
  },
  tooltip: {},
  legend: {
    data: ['能力评估'],
    bottom: 0,
  },
  radar: {
    indicator: safeDimensions.value.map((dim) => ({
      name: dim?.name || '',
      max: dim?.weight || 100,
    })),
    radius: '70%',
    axisName: {
      color: '#333',
      fontSize: 12,
      padding: [5, 5],
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(255, 255, 255, 0.5)', 'rgba(200, 200, 200, 0.1)'],
      },
    },
    splitNumber: 5,
  },
  series: [
    {
      name: '能力评估',
      type: 'radar',
      data: [
        {
          value: safeScores.value,
          name: '能力评估',
        },
      ],
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.3)',
      },
      lineStyle: {
        color: '#1890ff',
        width: 2,
      },
      itemStyle: {
        color: '#1890ff',
      },
    },
  ],
}))
</script>

<style scoped>
.radar-chart-container {
  width: 80%;
  height: 400px;
  margin: 40px auto 20px;
  padding-top: 30px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
